
<template>
  <div class="box_1">
    <bigscreen-header headerName="牧户：斯钦孟和" />

    <div class="w_full h_full-70 flex_row_between">
      <!-- 1 -->
      <div class="w_32_p h_full flex_column_between">
        <!-- 饼图 -->
        <div class="w_full h_49_p">
          <div class="full border_radius_10 chart_box_bgi relative">
            <div class="chart_title l_30 lh_30 text_center">牲畜数量</div>

            <div class="p_20 color_fff fw_bold">
              <div class="mb_10 flex_start">
                <div class="w_25_p text_left">
                  成年牛&nbsp; <span class="font_number main_color">242</span>
                </div>
                <div class="w_25_p text_left">
                  犊牛&nbsp; <span class="font_number main_color">34</span>
                </div>
                <div class="w_25_p text_left">
                  育肥牛&nbsp; <span class="font_number main_color">83</span>
                </div>
                <div class="w_25_p text_left">
                  检疫牛&nbsp; <span class="font_number main_color">234</span>
                </div>
                <!-- <div class="w_20_p text_left">
                  出售牛&nbsp; <span class="font_number mr_30 main_color">0</span>
                </div> -->
              </div>

              <div class="mb_10 flex_start">
                <div class="w_25_p text_left">
                  山羊&nbsp; <span class="font_number main_color">63</span>
                </div>
                <div class="w_25_p text_left">
                  绵羊&nbsp; <span class="font_number main_color">12</span>
                </div>
                <div class="w_25_p text_left">
                  出售羊&nbsp; <span class="font_number main_color">32</span>
                </div>
              </div>

              <div class="mb_10 flex_start">
                <div class="w_25_p text_left">
                  青猪&nbsp; <span class="font_number mr_30 main_color">2</span>
                </div>
                <div class="w_25_p text_left">
                  育肥猪&nbsp; <span class="font_number mr_30 main_color">2</span>
                </div>
                <div class="w_25_p text_left">
                  老母猪&nbsp; <span class="font_number mr_30 main_color">1</span>
                </div>
                <div class="w_25_p text_left">
                  猪仔&nbsp; <span class="font_number mr_30 main_color">4</span>
                </div>
              </div>

              <div class="mb_10 flex_start">
                <div class="w_25_p text_left">
                  禽&nbsp; <span class="font_number main_color">23</span>
                </div>
              </div>
              <div class="mb_10 flex_start">
                <div class="w_25_p text_left">
                  犬&nbsp; <span class="font_number main_color">2</span>
                </div>
              </div>
              <div class="mb_10 flex_start">
                <div class="w_25_p text_left">
                  马&nbsp; <span class="font_number main_color">2</span>
                </div>
              </div>
              <div class="mb_10 flex_start">
                <div class="w_25_p text_left">
                  驴&nbsp; <span class="font_number main_color">1</span>
                </div>
              </div>
            </div>

            <div class="w_full h_30 absolute left_5 bottom_0 color_fff fs_14">单位：头、只、羽</div>
          </div>
        </div>

        <div class="w_full h_49_p">
          <div class="full border_radius_10 chart_box_bgi">
            <div class="chart_title l_30 lh_30 text_center">机械数量</div>

            <bing-tu :value="data2" />
          </div>
        </div>
      </div> 

      <!-- 2 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="w_full h_49_p flex_column_between chart_box_bgi">
          <div class="w_full chart_title h_30 lh_30 text_center fs_18">
            牧户信息
          </div>

          <div class="w_full h_60_p p_10">
            <img class="h_full border_radius_10 response_img" src="https://fyoss.muu2.com/uploads/20240415/f2664200-fab0-11ee-aa33-69a1be055a46.jpeg" alt="">
            <!-- <img src="../../../../assets/images/user/user-avatar.png" alt=""> -->
          </div>

          <div class="w_full h_25_p color_fff ph_10">
            <div class="flex_row_between pr_20">
              <div class="h_24 lh_24 mb_3">所在镇（苏木）： <span class="main_color">巴林右旗大板镇</span> </div>
              <div class="h_24 lh_24 mb_3">草场面积：<span class="main_color font_number fw_bold ls_2">578 ㎡</span> </div>
            </div>
            
            <div class="flex_row_between pr_20">
              <div class="h_24 lh_24 mb_3">所在嘎查（村）： <span class="main_color">巴润哈日毛都嘎查村委员会</span></div>
              <div class="h_24 lh_24 mb_3">种植面积：<span class="main_color font_number fw_bold ls_2">214 ㎡</span> </div>
            </div>
            
            <div class="flex_row_between pr_20">
              <div class="h_24 lh_24 mb_3">
                电话：<span class="main_color fw_bold font_number ls_2">139****2494</span>
              </div>
              <!-- <div class="h_24 lh_24 mb_3 color_fff cursor" @click="goToShiFanDian">查看牧场</div> -->
            </div>
          </div>
        </div>

        <div class="w_full h_49_p">
          <div class="full border_radius_10 chart_box_bgi">
            <div class="chart_title l_30 lh_30 text_center">草料数量</div>
            <ban-bing-tu :value="data3" />
          </div>
        </div>
      </div> 

      <!-- 3 -->
      <div class="w_32_p h_full">
        <div class="full border_radius_10 chart_box_bgi flex_column_between">
          <div class="w_full chart_title h_30 lh_30 text_center">
            <div class="w_100 border_box fs_18">牲畜列表</div>
          </div>

          <div class="w_full h_full-30 ph_10 scroll_box overflow_y_auto">
            <div 
              class="w_full flex_row_between cursor" 
              v-for="(item, index) in cattle_list" :key="index"
              @click="showOxDetail(index)"
            >
              <div class="img_box w_30_p h_150">
                <div class="img full flex_column_around">
                  <img class="w_full border_radius_10 response_img" :src="item.oxImg" alt="">
                </div>
              </div>

              <div class="info_box w_70_p flex_column_around pl_20 color_fff">
                <div class="h_35 lh_35 fs_18">品种: {{ item.pinZhong}} </div>
                <div class="h_35 lh_35 fs_18">状态: 已免疫 </div>
                <div class="h_35 lh_35 fs_18">毛色: {{ item.maoSe}} </div>
                <div class="h_35 lh_35 fs_18">性别: {{ item.gender}} </div>
              </div>
            </div>
          </div> 
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
  import BigscreenHeader from '@/common/header/index.vue';
  import BaLinYouQiMap from '../maps/baLinYouQiMap.vue'
  import { getMuHuDetail } from '../../../../config/api';
  import HaoRaoQinHamlet from '../maps/da-ban-hamlet/hao-rao-qin.vue';
  import BingTu from '../charts/bing-tu.vue';
  import BanBingTu from '../charts/ban-bing-tu.vue';
  import ZhuZhuangTu from '../charts/zhu-zhuang-tu.vue';
  
  export default {
    name: 'showPage1',
    components: { BigscreenHeader, BaLinYouQiMap, HaoRaoQinHamlet, BingTu, BanBingTu, ZhuZhuangTu },
    data() {
      return {
        activeIndex: 0,
        makidoName: '',
        data1: {},
        data2: {},
        data3: {},
        muHuDetailData: {},

        testOxImg: [
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img1.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img2.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img3.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img5.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img4.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img6.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img7.jpg') },
          { oxImg: require('@/assets/images/WenDuSu-OxImg/img8.jpg') },
        ],

        cattle_list: [
          {
            oxImg: require('@/assets/images/WenDuSu-OxImg/img8.jpg'),
            pinZhong: '西门塔尔牛',
            status: '成年牛',
            maoSe: '红白花',
            gender: '母牛'
          },
          {
            oxImg: require('@/assets/images/WenDuSu-OxImg/img2.jpg'),
            pinZhong: '西门塔尔牛',
            status: '成年牛',
            maoSe: '红白花',
            gender: '母牛'
          },
          {
            oxImg: require('@/assets/images/WenDuSu-OxImg/img3.jpg'),
            pinZhong: '西门塔尔牛',
            status: '成年牛',
            maoSe: '红白花',
            gender: '母牛'
          },
          {
            oxImg: require('@/assets/images/WenDuSu-OxImg/img4.jpg'),
            pinZhong: '西门塔尔牛',
            status: '成年牛',
            maoSe: '红白花',
            gender: '母牛'
          },
          {
            oxImg: require('@/assets/images/WenDuSu-OxImg/img5.jpg'),
            pinZhong: '西门塔尔牛',
            status: '成年牛',
            maoSe: '红白花',
            gender: '母牛'
          },
          {
            oxImg: require('@/assets/images/WenDuSu-OxImg/img6.jpg'),
            pinZhong: '西门塔尔牛',
            status: '成年牛',
            maoSe: '红白花',
            gender: '母牛'
          },
          {
            oxImg: require('@/assets/images/WenDuSu-OxImg/img7.jpg'),
            pinZhong: '西门塔尔牛',
            status: '成年牛',
            maoSe: '红白花',
            gender: '母牛'
          },
          // {
          //   oxImg: require('@/assets/images/WenDuSu-OxImg/img1.jpg'),
          //   pinZhong: '西门塔尔牛',
          //   status: '成年牛',
          //   maoSe: '红白花',
          //   gender: '母牛'
          // },

        ]
      }
    },
    mounted() {
      let muHuId = this.$route.params.val

      // 通过牧户 id 获取 牧户详情信息
      // this.getMuHuDetail(muHuId)

      setTimeout(() => {
        this.initChart()
      }, 500)
    },
    methods: {
      // 初始化图表
      initChart() {
        this.data2 = {
          title: '机械数量',
          unit: '辆',
          data: [
            {name: "小型拖拉机", value: 2, unit: ' '},
            {name: "大型拖拉机", value: 1, unit: ' '},
            {name: "打草机", value: 1, unit: ' '},
            {name: "播种机", value: 1, unit: ' '},
            {name: "家用车辆", value: 2, unit: ' '}
          ]
        }

        this.data2 = {...this.data2}

        this.data3 = {
          title: '草料数量',
          unit: '吨',
          data: [
            {name: "甘草", value: 10, unit: ' '},
            {name: "饲料", value: 25, unit: ' '},
            {name: "配料", value: 15, unit: ' '}
          ]
        }

        this.data3 = {...this.data3}
      },

      // 跳转到 menu 页面
      goToMenuPage() {
        this.$router.push({
          path: "/bigscreen/menuPage"
        })
      },

      // 前往 牛详情
      showOxDetail(index) {
        let img = this.cattle_list[index].oxImg

        sessionStorage.setItem('oxImg', img)

        this.$router.push({
          path: '/bigscreen/mengHeNaShunOxDetail'
        })
      },

      // 格式化手机号 175 **** 4435
      formatPhone(val) {
        return val.substring(0, 3) + '****' + val.substring(7, 12)
      },

      // 跳转到 示范点牧户
      goToShiFanDian() {
        this.$router.push('/demo-makido牧户3')
      },

    }
  }
</script>

<style scoped lang="less">
  .activeColor { color: #2366fc !important; }

  @media screen and (min-width: 1200px) and (max-width: 1399px) {
    .w_20_p { font-size: 18px; } 
  }
</style>

